import React, { Component } from 'react';
import { Toast, ListView } from 'antd-mobile';
import { hashHistory } from 'react-router';
import './UserInfo.less';

import * as common from 'common/common.js';

import SeperateLine from 'common/components/SeperateLine.js';
import Bottom from 'common/containers/Bottom.js';
import GoodsItem from 'common/components/goods/GoodsItem.js';

import * as userApi from 'common/api/UserApi.js';
import * as goodsApi from 'common/api/GoodsApi.js';

/**
 * 用户组件
 */
class UserInfo extends Component{
	
	constructor(props) {
		super(props); 
		const ds = new ListView.DataSource({
			rowHasChanged: (row1, row2) => row1 !== row2
		});
		this.fetchData = [];
	    this.state = {
			pageNo: 0,
    	 	pageTotal: 100,
	      	ds: ds,
	      	isLoading: true,
			height: document.documentElement.clientHeight * 3 / 4,

	    	userInfo: {}
	    }
	}    

	renderRow = (item) => {
	    return (
			<div className="goodsItemWrapper">
				<GoodsItem data={item}></GoodsItem>
			</div>
		)
	}

	renderHeader = () => {
		const { userInfo } = this.state;
		return (
			<div className="userWrapper">
				<div className="userinfo_box">
					<div className="userinfo">
						<div className="head">
							<img src="assets/img/head.jpg"/>
						</div>
						<img className="setting" src="assets/img/setting.png" onClick={this.gotoSetting.bind(this)}/>
						<div className="info">
							<span>{userInfo.name}</span>
						</div>
					</div>
				</div>
				<div className="userToolsList">
					<ul className="ver_list_item">
						<li onClick={() => common.gotoUserOrderList("0")}>
							<span className="tips">2</span>
							<img src="assets/img/order_nopay.png"/>
							<span>待付款</span>
						</li>
						{/* <li onClick={() => common.gotoUserOrderList("1")}>
							<img src="assets/img/order_nopay.png"/>
							<span>待发货</span>
						</li> */}
						<li onClick={() => common.gotoUserOrderList("2")}>
							<span className="tips">14</span>
							<img src="assets/img/order_transport.png"/>
							<span>待收货</span>
						</li>
						<li onClick={() => common.gotoUserOrderList()}>
							<span className="tips">1</span>
							<img src="assets/img/order_return.png"/>
							<span>退换/售后</span>
						</li>
						<li onClick={() => common.gotoUserOrderList("-1")}>
							<img src="assets/img/order_all.png"/>
							<span>全部订单</span>
						</li>
					</ul>
					<SeperateLine lineHeight={"0.01rem"} bg={"#e8e8ed"}></SeperateLine>
					<ul className="ver_list_item">
						<li>
							<span className="num">0</span>
							<span>积分</span>
						</li>
						<li onClick={() => common.gotoUserCash()}>
							<span className="num">{common.fenToYuan(userInfo.balance)}</span>
							<span>余额</span>
						</li>
						<li>
							<span className="num">0张</span>
							<span>优惠券</span>
						</li>
						<li onClick={() => common.gotoUserCash()}>
							<img src="assets/img/account.png"/>
							<span>全部资产</span>
						</li>
					</ul>
				</div>
				<div className="userRecommend">
					<div className="userRecommendTitle">
						<span>为你推荐</span>
					</div>
				</div>
			</div>
		)
	}

	componentDidMount(){
		const height = document.documentElement.clientHeight;

		Toast.loading("", common.TIPS_LOADING_DURATION);
		userApi.userInfo({
			memberId:common.userId()
		}).then(result => {
			Toast.hide();
			if(result.code == common.SUCCESS){
				this.setState({
					userInfo: result.data
				})
			}else{
				Toast.info(result.msg, common.TIPS_INFO_DURATION);
			}
		})


		setTimeout(() => {
			goodsApi.goodsRecommendList({
				pageNo: this.state.pageNo,
				pageSize: 10
			}).then(result => {
				this.fetchData = [ ...this.fetchData, ...result.data.list];
			  	this.setState({
				  ds: this.state.ds.cloneWithRows(this.fetchData),
				  isLoading: false,
				  height: height,
				  hasMore: true
				});
			})
	  	}, 500);
	}
	
	onEndReached = (event) => {
		if(this.state.pageNo+2 > this.state.pageTotal){
		  this.setState({
			  hasMore: false
		  })
		  return;
	  }
	  if (this.state.isLoading && !this.state.hasMore) {
			return;
	  }
	  this.setState({ 
			isLoading: true, 
			pageNo: this.state.pageNo + 1
	  });
	  setTimeout(() => {
			goodsApi.goodsRecommendList({
				pageNo: this.state.pageNo,
				pageSize: 10
			}).then(result => {
			  this.fetchData = [ ...this.fetchData, ...result.data.list];
			   this.setState({
				  ds: this.state.ds.cloneWithRows(this.fetchData),
				  isLoading: false,
				  hasMore: true
				});
			})
	  }, 500);
	}
	
	//设置页面
	gotoSetting = () => {
		hashHistory.push("/userSetting");
	}
	
	render(){
		return(
			<div className="user">
				<ListView
					style={{
					height: this.state.height,
					overflow: 'auto'
					}}
					ref={el => this.lv = el}
					dataSource={this.state.ds}
					renderRow={this.renderRow}
					renderHeader={this.renderHeader}
					renderFooter={() => (
					<div style={{ padding: '0 0 0.9rem 0', lineHeight: '1rem', textAlign: 'center', fontSize: '0.28rem' }}>
						{
							this.state.hasMore 
							?
								this.state.isLoading
								?
								'加载中...' 
								: 
								'上拉加载'
							:
							'加载完毕'
						}
					</div>
					)}
					renderBodyComponent={() => (
						<div>{this.children}</div>
					)}
					pageSize={100}
					scrollRenderAheadDistance={500}
					onEndReached={this.onEndReached}
					onEndReachedThreshold={10}
				/>
				<Bottom selectedTab="user"></Bottom>
			</div>
		)
	}
}

export default UserInfo;